<template>
	<view class="content">
		<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper interval="2500" :autoplay="true" class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot> 
		
		<glanceProductList 
		    :titletxt="title"
		    @imgclick="studyCourse" 
		    :dataList="courseList" >
		</glanceProductList> 
		
		<uni-load-more :status="status"  :icon-size="16" :content-text="contentText" />
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import glanceProductList from '@/components/glance/glance-ProductList.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { mapGetters, mapState } from 'vuex'
	export default {
		components: {
			uniSwiperDot,
			glanceProductList,
			uniLoadMore
		},
		data() {
			return {
				currentPage: 1,
				pageSize: 4,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '数据加载中',
					contentnomore: '亲, 没有更多数据啦'
				},
				loadingFirst: false, // 是否上拉刷新列表
				title: '推荐课程',
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'dot',
				dotsStyles: {},
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				courseList: []
			}
		},
		
		computed: {
		   ...mapGetters({
		        host: 'common/host'
		   })
		},
		
		onLoad() {
		  this.getRecommendCourseList()
		},
		
		onPullDownRefresh() {
			this.loadingFirst = true
		    this.getRecommendCourseList()   
		},
		
		onReachBottom() {
			this.currentPage++
			this.getRecommendCourseList()
		},
			
		methods: {
			// 获取推荐课程列表
			getRecommendCourseList() {
				// let that = this
				let params = {
					offset: (this.currentPage - 1) * this.pageSize, 
					limit: this.pageSize
				}
				this.$httpApi.get('/student/course/getCourseList', params)
				.then(res => {
					let result = res.data.data
					if (result.dataList.length === 0) {
						this.status = 'noMore'
					}
					if (this.loadingFirst) {
						this.courseList = []
						setTimeout(() => {
							this.courseList = result.dataList
							this.loadingFirst = false
							uni.stopPullDownRefresh()
						}, 800)
					} else {
						this.courseList = this.courseList.concat(result.dataList)
					}
				})
				/* uni.request({
				    url: this.host + '/student/course/getCourseList', //仅为示例，并非真实接口地址。
				    data: {
						offset: (this.currentPage - 1) * this.pageSize,
						limit: this.pageSize
					},
				    success: (res) => {
						let result = res.data.data
						if (result.dataList.length === 0) {
							this.status = 'noMore'
						}
						if (this.loadingFirst) {
							this.courseList = []
							setTimeout(() => {
								this.courseList = result.dataList
								this.loadingFirst = false
								uni.stopPullDownRefresh()
							}, 800)
						} else {
							this.courseList = this.courseList.concat(result.dataList)
						}
						//this.courseList.map((item, index) => {
							//console.log(item);
							//console.log(index);
						//})
				    }
				}); */
			},
			
            change(e) {
				this.current = e.detail.current
			},
			
			// 课程学习
			studyCourse () {
				
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}
	
	/* #endif */
	
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	.example {
		padding: 0 15px 15px;
	}
	
	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	/* #endif */
	.example {
		padding: 0 15px;
	}
	
	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
	
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}
	
	
	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	
	.swiper-box {
		height: 200px;
	}
	
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
	}
	
	.image {
		width: 750rpx;
	}
	
	.uni-bg-red {
		background-color: #ff5a5f;
	}
	
	.uni-bg-green {
		background-color: #09bb07;
	}
	
	.uni-bg-blue {
		background-color: #007aff;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}
	
	.example-body-item {
	
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}
	
	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}
	
	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
	
</style>
